import XtxGuess from '@/components/XtxGuess.vue';
<template>
  <scroll-view class="viewport" scroll-y @scrolltolower="onScrollToLower">
    <view class="overview">
      <view class="status icon-checked">支付成功</view>
      <view class="buttons">
        <navigator
          hover-class="none"
          class="button navigator"
          url="/pages/index/index"
          open-type="switchTab"
          >返回首页</navigator
        >
        <navigator
          hover-class="none"
          class="button navigator"
          :url="`/pagesOrder/orderDetail/orderDetail?id=${orderId}`"
        ></navigator>
        <navigator
          hover-class="none"
          class="button navigator"
          :url="`/pagesOrder/orderDetail/orderDetail?id=${orderId}`"
          open-type="redirect"
          >查看订单</navigator
        >
      </view>
    </view>
    <XtxGuess ref="onScrollToLower"></XtxGuess>
  </scroll-view>
</template>

<script lang="ts" setup>
import XtxGuess from '@/components/XtxGuess.vue'
import { useGuessList } from '@/composables'
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
const { xtxguessRef, onScrollToLower } = useGuessList()

const orderId = ref('')
const loading = ref(true)

onLoad((options) => {
  loading.value = true
  orderId.value = options?.id
  loading.value
})
</script>

<style lang="scss" scoped>
page {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.viewport {
  height: 100vh;
  background-color: #f7f7f8;

  .overview {
    line-height: 1;
    padding: 50rpx 0;
    color: #fff;
    margin-bottom: 20rpx;
    background-color: #27ba8b;

    .status {
      font-size: 36rpx;
      font-weight: 500;
      text-align: center;
    }
    .status::before {
      display: block;
      font-size: 110rpx;
      margin-bottom: 20rpx;
    }
    .buttons {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 60rpx;
      line-height: 60rpx;
      margin-top: 60rpx;

      .button {
        text-align: center;
        margin: 0 10rpx;
        font-size: 28rpx;

        &:first-child {
          width: 200rpx;
          border-radius: 64rpx;
          border: 1px solid #fff;
        }
      }
    }
  }
}
</style>
